<template>
  <div>
    <p>你一共点了{{count}}次 count是 {{evenOrOdd}}</p>
    <button @click="increment">增加一</button>
    <button @click="decrement">减少一</button>
    <button @click="incrementIfEven">偶数加一</button>
    <button @click="incrementAsync">异步加一</button>
  </div>
</template>

<script>
  // import { mapMutations } from 'vuex'
  export default {
    name: 'Counter',
    methods: {
      // ...mapMutations(['INCREMENT', 'DECREMENT']),
      increment() {
        // this.INCREMENT()
        // this.$store.commit('INCREMENT')
        this.$store.dispatch('increment')
      },
      decrement() {
        // 同步调用 使用commit 或者 使用引入方法
        // if (this.count == 0) return
        // this.DECREMENT()

        // this.$store.commit('DECREMENT')
        // 异步调用increment方法 调用vuex的actions  dispatch派发
        this.$store.dispatch('decrement')
      },
      incrementIfEven() {
        this.$store.dispatch('incrementIfEven')
      },
      incrementAsync() {
        this.$store.dispatch('incrementAsync')
      }
    },
    computed: {
      count() {
        return this.$store.state.count
      },
      evenOrOdd() {
        return this.$store.getters.evenOrOdd
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>
